<template>
  <div v-if="show" class="userdialog_overlay">
    <div class="userdialog" :style="getusersdata()">
      <div class="userdialog_header">
        <div class="ud_header_time">本周（{{ getBeijingWeekDates() }}）</div>
        <div style="cursor: pointer" @click="show = false">
          <img src="@/assets/board/del-default.png" style="width: 18px; height: 18px" alt="" />
        </div>
      </div>
      <div class="userdialog_content">
        <div class="ud_content_search">
          <el-input v-model="searchkey" style="width: 160px" />
          <el-button type="primary" style="margin-left: 12px" @click="getusersdata()">查询</el-button>
        </div>
        <div class="ud_content_table">
          <el-table :data="users" style="width: 100%; margin-bottom: 20px;background-color: #f5f5f5 ;" height="calc( 100vh - 422px)" row-key="id"
            default-expand-all>
            <el-table-column width="30" align="center">
              <template #default="scope">
                <div class="ud_content_checkall">
                  <el-radio-group v-model="state.radiouser" @change="changeradioUser">
                    <el-radio :value="scope.row.value" />
                  </el-radio-group>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="账号">
              <template #default="scope">
                <div style="display: flex; flex-direction: column">
                  <!-- <div
                    style="cursor: pointer; cursor: pointer; border-bottom: 1px solid #ff7900; width: fit-content;"
                  >
                    {{ scope.row.label }}
                  </div> -->
                  <el-popover placement="right" :width="300" popper-class="popover_aumot" :show-after="200"
                    :hide-after="100" trigger="hover">
                    <template #reference>
                      <div style="
                          cursor: pointer;
                          cursor: pointer;
                          border-bottom: 1px solid #ff7900;
                          width: fit-content;
                        ">
                        {{ scope.row.label }}
                      </div>
                    </template>
                    <div class="account_amout">
                      <div class="title">最近50个订单本账号与其他账号相似度如下：</div>
                      <div class="content">
                        <div class="item" style="background: #ebebeb">
                          <div class="name" style="font-weight: bold; font-size: 12px; color: #8a8a8a">
                            账号名
                          </div>
                          <div class="num" style="font-weight: bold; font-size: 12px; color: #8a8a8a">
                            相似度
                          </div>
                        </div>
                        <el-scrollbar max-height="350px">
                          <template v-if="scope.row.user_value.similarity.length > 0">
                            <div class="item" v-for="(item, index) in scope.row.user_value.similarity" :key="index"
                              :style="index != scope.row.user_value.similarity.length - 1
                                ? 'border-bottom: 1px solid #ebebeb;'
                                : ''
                                ">
                              <div class="name">{{ item.member }}</div>
                              <div class="num" :style="item.simil_ratio >= 20 ? 'color: #ff5f58;' : 'color: #96e8a9;'">
                                {{ item.simil_ratio }}%
                              </div>
                            </div>
                          </template>

                          <template v-else>
                            <!-- <el-empty description="description" :image-size="30" /> -->
                            <div class="empty">暂无数据</div>
                          </template>
                        </el-scrollbar>
                      </div>
                    </div>
                  </el-popover>
                  <div style="color: #02a66e; font-size: 12px">{{ scope.row.user_value.now_amount }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="来源" width="60">
              <template #default="scope">
                <div style="display: flex; flex-direction: column">
                  <div style="font-size: 12px">{{ scope.row.user_value.fees_type == 'free' ? '共享' : '独享' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="85" prop="user_value.member_profit" label="最高" :sortable="customSortmemberprofit"
              align="center">
              <template #default="scope">
                <div :style="scope.row.member_profit >= 0 ? 'color: #02a66e;' : 'color: #f83e3e;'"
                  style="font-size: 14px; font-weight: bold">
                  <!-- {{ scope.row.user_value.member_profit }} -->
                  {{ getnum(scope.row.user_value.percent, scope.row.user_value.user_balance) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="95" prop="user_value.valid_amount" label="有效金额" :sortable="customSortvalidamount"
              align="center">
              <template #default="scope">
                <div style="font-size: 14px; font-weight: bold">
                  {{ scope.row.user_value.now_amount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="50" label="输赢" align="center">
              <template #default="scope">
                <div :style="scope.row.member_profit >= 0 ? 'color: #02a66e;' : 'color: #f83e3e;'">
                  {{ scope.row.user_value.member_profit >= 0 ? '赢' : '输' }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="width: 100%; height: 48px">
        <el-button type="primary" class="hovepcvicecolor"
          style="width: 100%; height: 48px; font-size: 16px; font-weight: 600; font-family: PingFangSC"
          @click="userSubmit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })

const { state, store } = inject('Home')
const { orderData } = state
const firstRadio = ref() //users数据中第一个选项的value值

const searchkey = ref('')
const users = ref([])
const users2 = computed(() => {
  const arr = []

  if (state.platformUsers[state.activecheckuserOrder.bc_type] != null) {
    state.platformUsers[state.activecheckuserOrder.bc_type].forEach(item => {
      let label = item.user_name
      arr.push({
        ...item,
        label: label,
        value: item.user_value.id,
      })
    })
    console.log(arr)
  }

  return arr
})

const customSortmemberprofit = (a, b) => {
  return a.user_value.member_profit - b.user_value.member_profit
}
const customSortvalidamount = (a, b) => {
  return a.user_value.valid_amount - b.user_value.valid_amount
}

const getBeijingWeekDates = () => {
  const now = new Date()
  const beijingOffset = 8 * 60 // 北京时区偏移量（分钟）
  const utcDate = new Date(now.getTime() + (now.getTimezoneOffset() + beijingOffset) * 60 * 1000)

  // 获取当前日期的星期几（0=星期日, 1=星期一,..., 6=星期六）
  const dayOfWeek = utcDate.getUTCDay()

  // 计算本周一的日期
  const mondayThisWeek = new Date(utcDate)
  mondayThisWeek.setUTCDate(utcDate.getUTCDate() - (dayOfWeek - 1))
  mondayThisWeek.setUTCHours(12, 0, 0, 0) // 设置为12:00:00

  // 计算下周一的日期
  const mondayNextWeek = new Date(mondayThisWeek)
  mondayNextWeek.setUTCDate(mondayThisWeek.getUTCDate() + 7)

  // 生成格式化日期字符串
  const formatDate = date => {
    const month = date.getUTCMonth() + 1 // 月份从0开始
    const day = date.getUTCDate()
    return `${month}/${day}`
  }

  // 判断今天是否是周一并且是否超过12点
  if (dayOfWeek == 0 || (dayOfWeek === 1 && utcDate.getHours() < 12)) {
    // 如果今天是周一且时间在12点之前，返回上周的日期
    mondayThisWeek.setUTCDate(mondayThisWeek.getUTCDate() - 7)
    mondayNextWeek.setUTCDate(mondayNextWeek.getUTCDate() - 7)
  }

  // 返回结果
  return `${formatDate(mondayThisWeek)} 12:00:00-${formatDate(mondayNextWeek)} 12:00:00`
}

const changecheckAll = value => {
  if (value) {
    state.radiouser = ''
  }
}

const changeradioUser = () => {
  if (state.checkuserAll) {
    state.checkuserAll = false
  }
}

const userSubmit = () => {
  let str = ''
  console.log(state.checkuserAll)

  if (state.checkuserAll || state.radiouser != '') {
    if (state.checkuserAll) {
      // str = firstRadio.value
      str = 'all'
    } else {
      str = state.radiouser
    }
    console.log(str)

    state.activecheckuserOrder.userId = str
    show.value = false
    handleUserChange()
  } else {
    ElMessage({
      message: '请选择账号',
      type: 'warning',
    })
  }
}

const handleUserChange = () => {
  store.getOrderInfo(state.activecheckuserOrder)
}

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true // 引用相同
  if (obj1 == null || obj2 == null || typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return false // 处理 null 和非对象
  }

  const keys1 = Object.keys(obj1)
  const keys2 = Object.keys(obj2)

  if (keys1.length !== keys2.length) return false // 键长度不同

  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false // 属性不相同
    }
  }

  return true
}

const getnum = (percent, settings) => {
  console.log(orderData);
  let sport = orderData.match.sport_type
  let num = 0
  if (sport == 'soccer') {
    num = settings.soccer_settings?.R.max || 0
    // let a = settings?.R.max || 0
    // let b = parseFloat(a.replace(/,/g, ''));
    // num = b * percent
  } else {
    num = settings.basketball_settings?.R.max || 0
    // let a = settings?.R.max || 0
    // let b = parseFloat(a.replace(/,/g, ''));
    // num = b * percent
  }
  return num

}

const getusersdata = () => {
  const arr = []
  console.log(111);
  

  if (state.activecheckuserOrder.bc_type && state.platformUsers[state.activecheckuserOrder.bc_type] != null) {
    state.platformUsers[state.activecheckuserOrder.bc_type].forEach(item => {
      if (searchkey.value == '') {
        let label = item.user_name
        arr.push({
          ...item,
          label: label,
          value: item.user_value.id,
        })
      } else {
        let label = item.user_name
        if (label.includes(searchkey.value)) {
          arr.push({
            ...item,
            label: label,
            value: item.user_value.id,
          })
        }

      }

    })
    users.value = arr
  }
}

onMounted(() => {
  searchkey.value = ''
  getusersdata()
})
</script>

<style lang="scss" scoped>
.userdialog_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.userdialog {
  position: absolute;
  width: 100%;
  // background: #f5f5f5;
  background: #fff;
  bottom: 0;
  // height: 80%;
  height: calc(100vh - 260px);
  z-index: 3001;
  border-radius: 8px 8px 0 0;
}

.userdialog_header {
  width: 100%;
  height: 40px;
  margin: 0 0 10px;
  padding: 18px 16px;
  border-radius: 8px;
  background-color: #ebebeb;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .ud_header_time {
    font-size: 18px;
    font-weight: 600;
    color: #252a30;
  }
}

.userdialog_content {
  display: flex;
  flex-direction: column;
  padding: 0 16px 0 16px;

  .ud_content_search {
    height: 32px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.account_amout {
  display: flex;
  flex-direction: column;

  .title {
    color: #666;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: bold;
  }

  .content {
    display: flex;
    flex-direction: column;
    border: 1px solid #ebebeb;
    // padding: 4px 0;

    .item {
      display: flex;
      padding: 4px 0;

      .name {
        width: 120px;
        color: #333333;
        font-size: 12px;
        padding: 0 4px;
      }

      .num {
        flex: 1;
        font-size: 12px;
        padding: 0 4px;
      }
    }
  }
}

.empty {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 12px;
  padding: 8px 0;
}
</style>

<style>
.ud_content_checkall .el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.ud_content_checkall .is-checked .el-checkbox__inner::after {
  transform: translate(-50%, -50%) scale(1);
}

.ud_content_checkall .el-checkbox__inner::after {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.ud_content_table thead tr th {
  background: #f5f5f5 !important;
  border-bottom: none !important;
}

.ud_content_table tbody tr td {
  border-bottom: none !important;
  background: #f5f5f5 !important;
}

.ud_content_table .el-table .cell {
  padding: 0 6px;
}

.ud_content_checkall .el-radio {
  width: 20px;
  display: flex;
  justify-content: end;
}

.ud_content_checkall .el-radio .el-radio__label {
  padding: 0;
}

.popover_aumot {
  z-index: 3000 !important;
}
</style>